<template>
  <div class="app-container">
    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      element-loading-text="加载中"
      :data="tableData"
      style="width: 100%"
      border
      stripe
      size="mini"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column label="序号" width="60">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="项目名称" width="180">
        <template slot-scope="scope">
          <a :href="scope.row.url" target="_blank" class="project-name">{{
            scope.row.name
          }}</a>
        </template>
      </el-table-column>
      <el-table-column label="项目描述">
        <template slot-scope="scope">
          {{ scope.row.description.toString() }}
        </template>
      </el-table-column>
      <el-table-column label="预览图" width="150">
        <template slot-scope="scope">
          <el-image
            style="width: 150px"
            :src="server_URL + scope.row.thumb"
            :preview-src-list="srcList"
            fit="fill"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button
            type="info"
            size="mini"
            circle
            icon="iconfont icon-github"
            @click="handlePreview(scope.row)"
          ></el-button>
          <el-button
            type="primary"
            size="mini"
            plain
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="mini"
            plain
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑对话框 -->
    <el-dialog
      title="编辑"
      :visible.sync="dialogFormVisible"
      fullscreen
      @open="handleDialogOpen"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="项目描述（每一项描述以英文逗号分隔）"
          prop="description"
        >
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目链接" prop="url">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="源码链接" prop="github">
          <el-input v-model="form.github" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预览图">
          <Upload v-model="form.thumb" />
        </el-form-item>
        <el-form-item label="排序等级" prop="order">
          <el-select v-model="form.order" placeholder="排序等级">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deleteProject, editProject, getProject } from '@/api/project'
import { server_URL } from '@/urlConfig'
import Upload from '@/components/Upload'
export default {
  components: { Upload },
  data() {
    return {
      server_URL,
      tableData: [],
      listLoading: false,
      dialogFormVisible: false,
      form: {
        name: '',
        description: '',
        url: '',
        github: '',
        thumb: '',
        order: 1
      },
      rules: {
        name: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '项目描述不能为空', trigger: 'blur' }
        ],
        url: [{ required: true, message: '项目链接不能为空', trigger: 'blur' }],
        github: [
          { required: true, message: '源码链接不能为空', trigger: 'blur' }
        ],
        order: [{ required: true, message: '请选择排序等级', trigger: 'blur' }]
      },
      srcList: []
    }
  },

  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.listLoading = true
      const resp = await getProject()
      this.tableData = resp.data
      for (const i of this.tableData) {
        this.srcList.push(server_URL + i.thumb)
      }
      this.listLoading = false
    },
    handlePreview(row) {
      window.open(row.github)
    },
    handleEdit(row) {
      this.dialogFormVisible = true
      this.form = { ...row, description: row.description.toString() }
    },
    async handleEditSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const params = { ...this.form }
          params.description = this.form.description.split(',')
          params.order = parseInt(this.form.order)

          await editProject(params.id, params)
          this.dialogFormVisible = false
          this.$message.success('编辑成功')
          await this.fetchData()
        }
      })
    },
    handleDelete(row) {
      this.$confirm('确定要删除此项目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deleteProject(row.id)
          this.fetchData()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleDialogOpen() {
      // 清除校验样式
      this.$refs.form.clearValidate()
    }
  }
}
</script>

<style lang="scss" scoped>
.project-name:hover {
  color: rgb(163, 163, 163);
}
</style>
